<template name="pageHeader">
  <view class="position-relat page-title-box flex-row-center">
    <view class="position-relat header-title"
      ><text>{{ title }}</text></view
    >
    <view
      v-show="isShowIcon"
      :style="{ height: statusBarObject.headerHeight + 'px' }"
      :class="
        homeBack
          ? 'position-relat header-arrow-icon arrow-icon home-icon flex-row-center'
          : 'position-relat header-arrow-icon arrow-icon flex-row-center'
      "
      @tap="goBack"
    ></view>
  </view>
</template>
<script>
export default {
  name: 'pageHeader',
  props: {
    title: {
      type: String,
      default: '',
    },
    isShowIcon: {
      type: Boolean,
      default: true,
    },
    homeBack: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      statusBarObject: {
        statusBarHeight: 0,
        headerHeight: 0,
      },
    };
  },
  onShow() {},
  onHide() {},
  created() {
    this.statusBarObject = getApp().globalData.statusBarObject;
  },
  beforeDestroy() {
    // this.clear();
  },

  onPullDownRefresh() {
    console.log('----refresh-----');
  },

  computed: {},
  watch: {},

  methods: {
    goBack() {
      this.$emit('goback');
    },
  },
};
</script>
<style lang="scss" scoped>
.page-title-box {
  width: 100%;
  height: 100%;
  .header-title {
    height: 42rpx;
    font-family: PingFang SC;
    font-size: 31rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31rpx;
    letter-spacing: 0rpx;
    color: #fefeff;
  }
  .header-arrow-icon {
    position: absolute;
    left: 0rpx;
    width: 122rpx;
    padding-right: 38rpx;
    &.arrow-icon {
      background: url('https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/2c7cc73235821b32ae646380963d4bcb.png')
        38rpx center no-repeat;
      background-size: 46rpx auto;
    }
    &.home-icon {
      top: 0;
    }
  }
}
</style>
